<!---->
<template>
    <div class="pageBurst">
        <headerT title="商城" :isShowBack="false"/>
        <div class="pagesMain" style="height: 91vh;margin-top: 1.2rem;">
            <dashboard :isShowTab="chooseName"></dashboard>
            <div class="pageContent" style="overflow:hidden">
                <div class="leftNav">
                    <div class="navTap" v-for="(item,index) in nineAreaLists" @click="gettrade(index)"
                         :class="item.isSelect ?  'chooseItem' : ''">{{item.area_name}}
                    </div>
                </div>
                <div class="rightBlock">
                    <div v-if="nineAreaLists.length" class="commonArea">{{nineAreaLists[freshIndex].area_name}}</div>
                    <div class="goodsList" v-if="goodsList.length">
                        <div class="goodsItem comBorderBottom" v-for="(item,index) in goodsList" :keys="item.id">
                            <div class="translateBlock">
                                <img :src="item.good_img.length ? item.good_img[0].img_url :  '../../../static/images/lishi.png'"
                                     class="goodsPic" alt=""/>
                            </div>
                            <div class="translateBlock goodsInfo">
                                <div class="goodsName moreTextEllipsis">
                                    {{item.goods_name}}
                                </div>
                                <div class="translateBlock">
                                    <div class="price">
                                        <div class="discount translateBlock mainColor">
                                            <span>¥</span>
                                            <span></span>
                                            <span v-if="item.good_marketing && item.good_marketing.promotion_price">
                                                {{item.good_marketing.promotion_price}}
                                            </span>
                                            <span v-else>
                                                <span v-if="item.good_specification.length">
                                                    {{item.good_specification[0].price}}
                                                </span>
                                            </span>
                                        </div>
                                        <div class="originalPrice translateBlock">
                                            <span v-if="item.good_specification.length">
                                                ¥{{item.good_specification[0].original_price}}
                                            </span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="noData" v-else></div>
                </div>
            </div>
        </div>
        <tabcard></tabcard>
    </div>
</template>

<script>
    import Vue from 'vue'
    import dashboard from '@/components/dashboard'
    import tabcard from '@/components/tabCard'
    import {nineAreaList} from '../../services/home'
    import {goodsList} from '../../services/goods'

    export default {
        name: "burst",
        components: {
            dashboard,
            tabcard
        },

        data() {
            return {
                id: this.$route.query.id,
                name: this.$route.query.name,
                nineAreaLists: [],   // 主城九区
                goodsList: [],   // 商品列表
                longitude: '106.57',     // 经度
                dimensionality: '29.55',  // 纬度
                type: 1,
                freshIndex: this.$store.state.user.nineListIndex,
            }
        },

        created() {

        },

        computed: {
            chooseTab() {
                let _chooseTab = this.$store.state.user.chooseTab
                return Number(_chooseTab);
            },
            chooseName() {
                let _name = this.name === '综合' || this.name === '爆抢' || this.name === '商家推荐' || this.name ===
                    '精致生活' || this.name === '生鲜水果'
                return _name
            },
        },

        mounted() {
            this.getNineAreaList()
        },
        watch: {
            chooseTab(val) {
                this.gettrade(this.freshIndex)
            },
        },
        methods: {
            // 获取地区列表
            getNineAreaList() {
                this.$post(nineAreaList, {}).then(res => {
                    this.nineAreaLists = res.data;
                    this.nineAreaLists.forEach(item => {
                        Vue.set(item, 'isSelect', false)
                    })
                    this.nineAreaLists[this.freshIndex].isSelect = true;
                    this.gettrade(this.freshIndex)
                })
            },

            //获得商品
            gettrade(index) {
                this.nineAreaLists.forEach(item => {
                    item.isSelect = false;
                })
                this.nineAreaLists[index].isSelect = true;
                this.freshIndex = index;
                this.$store.dispatch('changeNineListIndex', index);
                let param = {
                    areas_id: this.nineAreaLists[index].id,
                    longitude: this.longitude,
                    dimensionality: this.dimensionality,
                }
                if (this.chooseTab === 1) {
                    Object.assign(param, {type: this.type,})
                } else {
                    Object.assign(param, {goods_type_id: this.chooseTab,})
                }

                this.$post(goodsList, param).then(res => {
                    this.goodsList = res.data.data;
                })

            },

        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .pageBurst {

        .pageContent {
            margin-top: -7rem;
            background-color: #fff;

            .leftNav {
                width: 2rem;
                height: 14rem;
                float: left;
                overflow-y: auto;
                background: #f8f8f8;
                border-top: solid 1px #f8f8f8;
                border-right: solid 1px #f8f8f8;

                .navTap {
                    width: 2rem;
                    height: 1.28rem;
                    line-height: 1.28rem;
                    text-align: center;
                    border-top: solid 1px #f8f8f8;
                    border-bottom: solid 1px #f8f8f8;
                    background: rgb(247, 247, 247);
                }

                .chooseItem {
                    font-weight: bold;
                    background-color: #fff;
                }
            }


            .rightBlock {
                max-height: 14rem;
                overflow-y: auto;

                .goodsList {
                    .goodsItem {
                        margin-bottom: 0.3rem;
                        padding-bottom: 0.1rem;

                        .goodsPic {
                            width: 2.88rem;
                            padding-left: .2rem;
                        }

                        .goodsInfo {
                            width: 4.45rem;
                            height: 1.98rem;
                            vertical-align: top;
                            font-size: .34rem;
                            color: #4e4e4e;
                            margin-left: 0.3rem;
                        }

                        .goodsName {
                            -webkit-line-clamp: 2
                        }

                        .sales {
                            color: #9F9F9F;
                            font-size: .3rem;
                        }

                        .discount {
                            font-size: .44rem;
                            margin-right: .17rem;
                        }

                        .originalPrice {
                            color: #9F9F9F;
                            font-size: .25rem;
                            text-decoration: line-through;
                        }

                        .btnBlock {
                            width: 2.6rem;
                            text-align: -webkit-right;
                        }

                        .btnBuy {
                            width: 1.65rem;
                        }
                    }

                    .goodsItem:first-child {
                        padding-top: 0.3rem;
                    }
                }
            }
        }
    }
</style>
